<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i>
                    <a href="#/contract">合同管理</a>
                </el-breadcrumb-item>
                <el-breadcrumb-item>添加合同</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form ref="formData" :model="formData" label-width="120px" label-position="left" :rules="rules">
                <div class="form-box">
                    <el-form-item prop="contractName" label="合同名称">
                        <el-input v-model="formData.contractName"></el-input>
                    </el-form-item>
                    <el-form-item prop="contractType" label="合同类型">
                        <el-select v-model="formData.contractType" placeholder="请选择">
                            <el-option
                                v-for="item in contractTypes"
                                :key="item.typeId"
                                :label="item.typeName"
                                :value="item.typeId"
                            ></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item prop="contractDepart" label="所属部门">
                        <el-select v-model="formData.contractDepart" placeholder="请选择">
                            <el-option
                                v-for="item in departs"
                                :key="item.departId"
                                :label="item.departName"
                                :value="item.departId"
                            ></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item prop="contactPerson" label="负责人/电话">
                        <el-select v-model="formData.contactPerson" placeholder="请选择">
                            <el-option
                                v-for="item in users"
                                :key="item.id"
                                :label="item.username + '/' + item.phone"
                                :value="item.username + '/' + item.phone"
                            ></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item prop="companiesA" label="甲方公司">
                        <el-select v-model="formData.companiesA" multiple placeholder="请选择">
                            <el-option
                                v-for="item in companies"
                                :key="item.companyId"
                                :label="item.companyName"
                                :value="item.companyId"
                                :disabled="formData.companiesB.some((e) => e == item.companyId) === true"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="signedDate" label="签订时间">
                        <el-col :span="11">
                            <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                v-model="formData.startTime1"
                                value-format="yyyy-MM-dd"
                                style="width: 100%"
                            ></el-date-picker>
                        </el-col>
                        <el-col class="line" :span="2">-</el-col>
                        <el-col :span="11">
                            <el-time-picker placeholder="选择时间" v-model="formData.startTime2" style="width: 100%"></el-time-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item prop="isApproval" label="审批类型">
                        <el-radio-group v-model="formData.isApproval">
                            <el-radio :label="0">需要审批</el-radio>
                            <el-radio :label="1">无需审批</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>

                <div class="form-box">
                    <el-form-item clearable prop="contractTemplate" label="合同模板">
                        <el-select @change="handleChange" @clear="clearSelect" v-model="formData.contractTemplate" value-key="templateId"  clearable placeholder="请选择">
                            <el-option v-for="item in contractTemplates"  :key="item.templateId" :label="item.templateName" :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="合同金额">
                        <el-input-number
                            size="medium"
                            v-model="formData.contractAmount"
                            :precision="2"
                            :step="1"
                            :min="0"
                        ></el-input-number>
                    </el-form-item>
                    <el-form-item prop="externString" label="额外字段">
                        <el-input disabled v-model="formData.externString" style="width: 70%"></el-input>
                        <el-button type="primary" style="margin: 0px 0px 0px 10px" @click="handleEditExtern">添加</el-button>
                    </el-form-item>
                    <el-form-item label="录入人员" style="width: 50%">
                        <el-input v-model="loginUser" disabled></el-input>
                    </el-form-item>

                    <el-form-item prop="companiesB" label="乙方公司">
                        <el-select v-model="formData.companiesB" multiple placeholder="请选择">
                            <el-option
                                v-for="item in companiesB"
                                :key="item.companyId"
                                :label="item.companyName"
                                :value="item.companyId"
                                :disabled="formData.companiesA.some((e) => e === item.companyId) === true"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="deadline" label="到期时间">
                        <el-col :span="11">
                            <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                v-model="formData.endTime1"
                                value-format="yyyy-MM-dd"
                                style="width: 100%"
                            ></el-date-picker>
                        </el-col>
                        <el-col class="line" :span="2">-</el-col>
                        <el-col :span="11">
                            <el-time-picker placeholder="选择时间" v-model="formData.endTime2" style="width: 100%"></el-time-picker>
                        </el-col>
                    </el-form-item>

                    <el-form-item prop="isCompleted" label="完成状态">
                        <el-radio-group v-model="formData.isCompleted">
                            <el-radio :label="0">未完成</el-radio>
                            <el-radio :label="1">已完成</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>
                <div style="margin: 10px 30px; with: 90%">
                    <el-form-item label="合同收支">
                        <div style="margin: 10px">
                            <el-button type="primary" @click="handleAddContractStatus">添加记录</el-button>
                            <el-button @click="clearAllStatus">清空</el-button>
                        </div>

                        <div style="margin: 0px 10px">
                            <el-table :data="formData.contractStatuses" style="width: 100%" height="360">
                                <el-table-column prop="statusName" label="名称" width="200"> </el-table-column>
                                <el-table-column prop="payment" label="收付款" width="160"> </el-table-column>
                                <el-table-column prop="desc" label="备注" width="340"> </el-table-column>
                                <el-table-column prop="operateTime" label="操作时间" width="200"> </el-table-column>
                                <el-table-column fixed label="操作" width="200">
                                    <template slot-scope="scope">
                                        <el-button
                                            size="small"
                                            type="danger"
                                            icon="el-icon-delete"
                                            @click="handleDeleteContractStatus(scope.$index, scope.row)"
                                            >删除</el-button
                                        >
                                    </template>
                                    ></el-table-column
                                >
                            </el-table>
                        </div>
                    </el-form-item>
                </div>
                <div style="margin: 10px 30px; width: 500px">
                    <el-form-item label="合同附件">
                        <el-upload
                            ref="upload"
                            :accept="acceptType"
                            drag
                            action=""
                            :auto-upload="false"
                            multiple
                            show-file-list
                            :limit="20"
                        >
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击选择</em></div>
                            <div slot="tip" class="el-upload__tip">支持上传图片、pdf、txt、word、excel、ppt</div>
                        </el-upload>
                    </el-form-item>
                </div>
            </el-form>

            <div style="text-align: center">
                <el-button type="primary" @click="contractSubmit">提交合同信息</el-button>
                <el-button @click="clearData">取消</el-button>
            </div>
        </div>

        <el-dialog title="额外字段" :visible.sync="externVisible" width="40%">
            <el-form :inline="true" :model="formData" label-width="80px">
                <div v-for="(item, index) in formData.externs" :key="item.key">
                    <el-form-item
                        :label="'字段' + index"
                        :prop="'externs.' + index + '.name'"
                        :rules="[{ required: true, message: '字段不能为空', trigger: 'blur' }]"
                    >
                        <el-input v-model="item.name" placeholder="输入字段名"> </el-input>
                    </el-form-item>
                    <el-form-item
                        :label="'内容' + index"
                        :prop="'externs.' + index + '.value'"
                        :rules="[{ required: true, message: '内容不能为空', trigger: 'blur' }]"
                    >
                        <el-input v-model="item.value" placeholder="输入内容"> </el-input>
                    </el-form-item>
                    <el-button style="margin: 0px 10px" @click.prevent="removeExtern(item)">删除</el-button>
                </div>
                <div style="text-align: center">
                    <el-form-item>
                        <el-button type="primary" @click="closeExtern">确定</el-button>
                        <el-button @click="addExtern">新增</el-button>
                        <el-button @click="resetExtern">重置</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </el-dialog>
        <el-dialog title="添加收支信息" :visible.sync="statusVisible" width="40%">
            <el-form ref="formStatus" :model="formStatus" label-width="100px">
                <el-form-item
                    prop="statusName"
                    label="名称"
                    :rules="[
                        {
                            required: true,
                            message: '请输入名称',
                            trigger: 'blur'
                        }
                    ]"
                >
                    <el-input v-model="formStatus.statusName" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item prop="payment" label="收付款">
                    <el-input-number size="medium" v-model="formStatus.payment" :precision="2" :step="1" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item prop="desc" label="备注">
                    <el-input v-model="formStatus.desc" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="confirmFormContractStatus">新增</el-button>
                    <el-button @click="clearAddStatus">清空</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog
            title="上传进度"
            :visible.sync="dialog"
            append-to-body
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :show-close="false"
        >
            <el-progress :percentage="progress"></el-progress>
            <p style="text-align: center; margin: 10px 0">已上传大小：{{ loaded }}，总大小： {{ total }}</p>
        </el-dialog>
    </div>
</template>

<script>
import { get, post, put, http, BASE_URL } from '../../api/http';
import { dateToString, getFromDateAndTime } from '../../util/DateUtil';
import * as api from '@/api/index';
import axios from 'axios';
export default {
    name: 'addContract',
    data() {
        var checkSignedDate = (rule, value, callback) => {
            let date1 = this.formData.startTime1;
            let date2 = this.formData.startTime2;
            let date3 = this.formData.endTime1;
            let date4 = this.formData.endTime2;
            if (date1 === '' || !date1) {
                callback(new Error('请输入日期'));
            }
            if (date2 === '' || !date2) {
                callback(new Error('请输入时间'));
            }
            if ((date1 !== '' || date1) && (date2 !== '' || date2) && (date3 !== '' || date3) && (date4 !== '' || date4)) {
                let date = new Date(date1);
                let time = new Date(date2);
                let hour = time.getHours();
                let minute = time.getMinutes();
                let second = time.getSeconds();
                date.setHours(hour);
                date.setMinutes(minute);
                date.setSeconds(second);
                let start = date;
                date = new Date(date3);
                time = new Date(date4);
                hour = time.getHours();
                minute = time.getMinutes();
                second = time.getSeconds();
                date.setHours(hour);
                date.setMinutes(minute);
                date.setSeconds(second);
                let end = date;
                if (start.getTime() > end.getTime()) {
                    callback(new Error('签约时间不能迟于截止时间'));
                }
            }
            callback();
        };
        var checkDeadline = (rule, value, callback) => {
            let date1 = this.formData.endTime1;
            let date2 = this.formData.endTime2;
            let date3 = this.formData.startTime1;
            let date4 = this.formData.startTime2;
            if (date1 === '' || !date1) {
                callback(new Error('请输入日期'));
            }
            if (date2 === '' || !date2) {
                callback(new Error('请输入时间'));
            }
            if ((date1 !== '' || date1) && (date2 !== '' || date2) && (date3 !== '' || date3) && (date4 !== '' || date4)) {
                let date = new Date(date1);
                let time = new Date(date2);
                let hour = time.getHours();
                let minute = time.getMinutes();
                let second = time.getSeconds();
                date.setHours(hour);
                date.setMinutes(minute);
                date.setSeconds(second);
                let end = date;
                date = new Date(date3);
                time = new Date(date4);
                hour = time.getHours();
                minute = time.getMinutes();
                second = time.getSeconds();
                date.setHours(hour);
                date.setMinutes(minute);
                date.setSeconds(second);
                let start = date;

                if (start.getTime() > end.getTime()) {
                    callback(new Error('截止时间不能早于签订时间'));
                }
            }
            callback();
        };
        var checkExtern = (rule, value, callback) => {
            // console.log(value);
            // console.log(1);
            // console.log(this.formData.externString);
            // console.log(this.formData.externs);
            let list = this.formData.externs;
            let len = list.length;
            for (let i = 0; i < len; i++) {
                if (list[i].name === '' || list[i].value === '') {
                    callback(new Error('请完善字段'));
                }
                if (list[i].name !== '' && list[i].value !== '') {
                    for (let j = 0; j < len && i !== j; j++) {
                        if (list[i].name === list[j].name) {
                            callback(new Error('字段名称存在重复'));
                        }
                    }
                }
            }
            callback();
        };
        return {
            acceptType: '.png,.jpg,.jpeg,.bmp,.pdf,.txt,.docx,.doc,.xls,.xlsx,.ppt,.pptx',
            dialog: false,
            loaded: 0,
            total: 0,
            progress: 0,
            fileList: [],
            rules: {
                contractName: [{ required: true, message: '请输入合同名', trigger: 'blur' }],
                contractType: [{ required: true, message: '请选择合同类型', trigger: 'change' }],
                companiesA: [{ required: true, message: '请选择甲方公司', trigger: 'change' }],
                companiesB: [{ required: true, message: '请选择乙方公司', trigger: 'change' }],
                contactPerson: [{ required: true, message: '请选择负责人', trigger: 'change' }],
                contractDepart: [{ required: true, message: '请选择所属部门', trigger: 'change' }],
                signedDate: [{ required: true, validator: checkSignedDate, trigger: ['blur', 'change'] }],
                deadline: [{ required: true, validator: checkDeadline, trigger: ['blur', 'change'] }],
                isApproval: [{ required: true, message: '请选择审批类型', trigger: 'blur' }],
                isCompleted: [{ required: true, message: '是否完成', trigger: 'blur' }],
                phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
                externString: [{ validator: checkExtern, trigger: ['blur', 'change'] }],
                name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
            },
            loginUser: '',
            loginUserId: '',
            externVisible: false,
            attachmentVisible: false,
            statusVisible: false,
            formStatus: {
                statusId: '',
                statusName: '',
                payment: 0.0,
                operateTime: '2021-04-22 14:22:14',
                desc: ''
            },
            formData: {
                contractName: '',
                contractType: '',
                contractDepart: '',
                contractTemplate: '',
                companiesA: [],
                companiesB: [],
                contactPerson: '',
                contractAmount: 0.0,
                isApproval: 0,
                isCompleted: 0,
                externString: '自定义字段',
                startTime1: '',
                startTime2: '',
                endTime1: '',
                endTime2: '',
                externs: [
                    {
                        name: '',
                        value: ''
                    }
                ],
                attachments: [],
                contractStatuses: []
            },
            defaultData: {
                contractName: '',
                contractType: '',
                contractDepart: '',
                contractTemplate: '',
                companiesA: [],
                companiesB: [],
                contactPerson: '',
                contractAmount: 0.0,
                isApproval: 0,
                isCompleted: 0,
                externString: '自定义字段',
                startTime1: '',
                startTime2: '',
                endTime1: '',
                endTime2: '',
                externs: [
                    {
                        name: '',
                        value: ''
                    }
                ],
                attachments: [],
                contractStatuses: []
            },
            tableData: [],
            value: '',
            num: 1,
            companies: [],
            companiesA: [],
            companiesB: [],
            contractTypes: [],
            departs: [],
            contactPerson: [],
            users: [],
            contractTemplates: [],
            contractId: ''
        };
    },
    created() {
        this.initData();
    },
    methods: {
        initData() {
            this.getCompanyData();
            this.getContractTypeData();
            this.getDepartData();
            this.getUserData();
            this.getContractTemplateData();
            this.loginUser = localStorage.getItem('username');
            this.loginUserId = localStorage.getItem('userId');
            this.formData = this.defaultData;
        },
        convertFormToParams() {
            let params = new FormData();
            let companiesA = [];
            this.formData.companiesA.forEach((item) => {
                companiesA.push({
                    companyId: item
                });
            });
            let companiesB = [];
            this.formData.companiesB.forEach((item) => {
                companiesB.push({
                    companyId: item
                });
            });
            let date1 = getFromDateAndTime(this.formData.startTime1, this.formData.startTime2);
            let date2 = getFromDateAndTime(this.formData.endTime1, this.formData.endTime2);

            let contract = {
                contractName: this.formData.contractName,
                contractType: {
                    typeId: this.formData.contractType
                },
                depart: {
                    departId: this.formData.contractDepart
                },
                contactPerson: this.formData.contactPerson.split('/')[0],
                contactPhone: this.formData.contactPerson.split('/')[1],
                companiesA: companiesA,
                companiesB: companiesB,
                startTime: dateToString(date1),
                endTime: dateToString(date2),
                edited: 0,
                passed: this.formData.isApproval,
                completed: this.formData.isCompleted,
                templateId: this.formData.contractTemplate.templateId,
                templateName: this.formData.contractTemplate.templateName,
                contractAmount: this.formData.contractAmount,
                externList: this.formData.externs,
                createUser: { userId: this.loginUserId }
            };
            const files = this.$refs.upload.uploadFiles;
            params.append('contract', new Blob([JSON.stringify(contract)], { type: 'application/json' }));
            if (files && files.length) {
                files.forEach((item) => {
                    params.append('files', item.raw, item.name);
                });
            }
            let statuses = this.formData.contractStatuses;
            if (statuses && statuses.length) {
                params.append('statuses', new Blob([JSON.stringify(statuses)], { type: 'application/json' }));
            }
            return params;
        },
        clearSelect(){
            console.log(this.formData);
        },
        handleChange(value) {
            console.log(value === '');
            if (value !== '') {
                let companiesA = [];
                this.companies.forEach((item) => {
                    if (value.companiesA.split(',').some((e) => e == item.companyName)) {
                        companiesA.push(item.companyId);
                    }
                });
                let companiesB = [];
                this.companies.forEach((item) => {
                    if (value.companiesB.split(',').some((e) => e == item.companyName)) {
                        companiesB.push(item.companyId);
                    }
                });
                let depart = '';
                for (var i in this.departs) {
                    let item = this.departs[i];
                    if (item.departName === value.depart) {
                        depart = item.departId;
                        console.log(item.departName);
                        break;
                    }
                }
                let contractType = '';
                for (var i in this.contractTypes) {
                    let item = this.contractTypes[i];
                    if (item.typeName === value.contractType) {
                        contractType = item.typeId;
                        break;
                    }
                }
                this.formData.contractName = value.templateName;
                this.formData.companiesA = companiesA;
                this.formData.companiesB = companiesB;
                this.formData.contactPerson = value.contactPerson + '/' + value.contactPhone;
                this.formData.contactPhone = value.contactPhone;
                this.formData.contractAmount = value.contractAmount;
                this.formData.contractType = contractType;
                this.formData.contractDepart = depart;
            }
            else{
                this.formData = this.defaultData;
            }
        },
        clearData() {
            Object.assign(this.$data, this.$options.data.call(this));
            this.$refs.upload.clearFiles();
            this.initData();
        },

        contractSubmit() {
            const that = this;
            console.log(this.formData.isApproval);
            console.log(this.formData.isCompleted);

            this.$refs.formData.validate((valid) => {
                if (valid) {
                    let params = this.convertFormToParams();
                    let headers = {
                        'Content-Type': 'multipart/form-data'
                    };
                    let progessEvent = (pe) => {
                        this.progress = Number.parseInt((pe.loaded / pe.total) * 100);
                        this.loaded = pe.loaded;
                        this.total = pe.total;
                    };
                    const files = this.$refs.upload.uploadFiles;
                    if (files && files.length) {
                        this.dialog = true;
                        this.progress = this.loaded = this.total = 0;
                        api.saveContract(params, headers, progessEvent)
                            .then((res) => {
                                console.log(res);
                                this.dialog = false;
                                if (res.code === 200) {
                                    this.$message.success(res.msg);
                                } else {
                                    this.$message.error(res.msg);
                                }
                            })
                            .catch((err) => {
                                console.log(err);
                                this.dialog = false;
                                this.$message.error('请求失败');
                            });
                    } else {
                        api.saveContract(params, headers)
                            .then((res) => {
                                this.dialog = false;
                                console.log(res);
                                if (res.code === 200) {
                                    this.$message.success('合同添加成功');
                                } else {
                                    this.$message.error(res.msg);
                                }
                            })
                            .catch((err) => {
                                console.log(err);
                                this.dialog = false;
                                this.$message.error('请求失败');
                            });
                    }
                }
            });
        },

        onSubmit() {},
        handleAddContractStatus() {
            this.statusVisible = true;
        },
        confirmFormContractStatus() {
            this.formData.contractStatuses;
            console.log(this.formData.contractStatuses);
            this.$refs.formStatus.validate((valid) => {
                if (valid) {
                    let currentTime = new Date();
                    let list = this.formData.contractStatuses;
                    if (this.getTotalAmount() + this.formStatus.payment > this.formData.contractAmount) {
                        this.$message.error('收付款金额超过了合同总金额,添加失败');
                        return;
                    } else if (list.some((item) => item.name === this.formStatus.statusName)) {
                        this.$message.error('收支名称已重复');
                        return;
                    } else {
                        this.formData.contractStatuses.push({
                            statusName: this.formStatus.statusName,
                            payment: this.formStatus.payment,
                            desc: this.formStatus.desc,
                            operateTime: dateToString(currentTime)
                        });
                        Object.assign(this.$data.formStatus, this.$options.data().formStatus);
                        this.statusVisible = false;
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        handleDeleteContractStatus(index, row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.$message.success('删除成功');
                    this.formData.contractStatuses.splice(index, 1);
                })
                .catch(() => {});
        },
        clearAddStatus() {
            Object.assign(this.$data.formStatus, this.$options.data().formStatus);
        },
        clearAllStatus() {
            this.formData.contractStatuses.splice(0);
        },
        resetExtern() {
            this.formData.externs = [
                {
                    name: '',
                    value: ''
                }
            ];
            this.getExternString();
        },
        closeExtern() {
            this.externVisible = false;
            this.getExternString();
        },
        handleEditExtern() {
            this.externVisible = true;
        },
        removeExtern(item) {
            var index = this.formData.externs.indexOf(item);
            if (index !== -1) {
                this.formData.externs.splice(index, 1);
            }
            this.getExternString();
        },
        addExtern() {
            this.formData.externs.push({
                name: '',
                value: '',
                key: Date.now()
            });
        },

        getTotalAmount() {
            let totalAmount = 0;
            let list = this.formData.contractStatuses;
            for (let i = 0; i < list.length; i++) {
                totalAmount += list[i].payment;
            }
            return totalAmount;
        },
        getExternString() {
            let list = this.formData.externs;
            let string = '';
            if (list.length > 1) {
                for (let i = 0; i < list.length - 1; i++) {
                    console.log(list[i].value);
                    string += list[i].name + ':' + list[i].value + ',';
                }

                string += list[list.length - 1].name + ':' + list[list.length - 1].value;
            }
            if (list.length === 1) {
                string += list[list.length - 1].name + ':' + list[list.length - 1].value;
            }
            this.$set(this.formData, 'externString', string);
            // console.log(string);
            // console.log(1);
            // console.log(this.formData.externString);
        },
        getCompanyData() {
            let url = '/companies';
            get(url)
                .then((res) => {
                    if (res.code === 200) {
                        this.companies = res.data;
                        this.companiesA = res.data;
                        this.companiesB = res.data;
                    }
                })
                .catch((err) => {});
        },
        getContractTypeData() {
            let url = '/contracts/types';
            get(url)
                .then((res) => {
                    if (res.code === 200) {
                        this.contractTypes = res.data;
                    }
                })
                .catch((err) => {});
        },
        getContractTemplateData() {
            let url = '/templates';
            get(url)
                .then((res) => {
                    if (res.code === 200) {
                        this.contractTemplates = res.data;
                    }
                })
                .catch((err) => {});
        },
        getDepartData() {
            let url = '/departs';
            get(url)
                .then((res) => {
                    if (res.code === 200) {
                        this.departs = res.data;
                        // console.log(this.departs);
                    }
                })
                .catch((err) => {});
            // console.log(this.departs);
        },
        getUserData() {
            let url = 'users';
            get(url)
                .then((res) => {
                    if (res.code === 200) {
                        this.users = res.data;
                        //console.log(this.users);
                    }
                })
                .catch((err) => {});
        }
    }
};
</script>

<style scoped>
.form-box {
    display: inline-block;
    margin: 10px 30px;
    width: 45%;
}
</style>